<script lang="ts" setup>
import {Check} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'

import {ref} from 'vue'

import {DrawDataTypeRef,DrawDataType} from '@/type/UseDraw.d'

import {BroadCaster} from '@/utils/BroadCaster'



// 编辑的数据
let editObj = ref<DrawDataType>({
    id:'',
    color:'',
    outlineColor:'',
    istracked:false
});

// 监听设置图形的方法
const onChangeSettingGraphic = (item:any)=>{
    editObj.value = item
}
// 声明广播器
let BroadCasterObj = new BroadCaster();
BroadCasterObj.addFn('onChangeSettingGraphic',onChangeSettingGraphic)

// 接收情况数据的函数
const onChangeEditClearLayer = (item:any)=>{
    editObj.value = {
        id:'',
        color:'',
        outlineColor:'',
        istracked:false
    }
}
BroadCasterObj.addFn('onChangeEditClearLayer',onChangeEditClearLayer)
const saveDraw = ()=>{
    if(!editObj.value.id){
        ElMessage({
            message: '请选择需要修改的节点',
            type: 'warning',
        })
        return;
    }
    
    if(!Array.isArray(editObj.value.pixelOffset)){
        editObj.value.pixelOffset && (editObj.value.pixelOffset = editObj.value.pixelOffset.split(',').map(t=>Number(t)))
    }
    if(!Array.isArray(editObj.value.planeSize)){
        editObj.value.planeSize && (editObj.value.planeSize = editObj.value.planeSize.split(',').map(t=>Number(t)))
    }

    BroadCasterObj.RemindFn("onChangeEditGraphic",editObj.value)
}

let disableds = ["id","position","type"]
// 判断是否要禁用
const isDisabled = (key:string)=>{
    return disableds.includes(key);
}
</script>
<template>
  <div class="EditGraphicalPanel">
    <div class="EditGraphicalPanelBox">
        <div class="EditGraphicalTitle">
            <span>修改</span>
            <div class="EditGraphicalTitleBtn">
              <el-tooltip
                effect="dark"
                content="保存"
                placement="top-start">
                <el-icon @click="saveDraw"><Check /></el-icon>
              </el-tooltip>
            </div>
        </div>
        <div class="EditGraphicalContent">
            <el-scrollbar height="calc(100% - 30px)">
                <div class="EditGraphicBox">
                    <el-form :inline="true" :model="editObj">
                        <el-form-item v-for="(item,index) in editObj" :key="index" :label="DrawDataTypeRef[index]" label-width="70px">
                            <el-color-picker v-if="index=='color'" v-model="editObj[index]" show-alpha />
                            <el-color-picker v-else-if="index=='outlineColor'" v-model="editObj[index]" show-alpha />
                            <el-checkbox v-else-if="index=='istracked'" v-model="editObj[index]" size="large" />
                            <el-input v-else :disabled="isDisabled(index)" v-model="editObj[index]" />
                        </el-form-item>
                    </el-form>
                </div>
            </el-scrollbar>
        </div>
    </div>
  </div>
</template>
<style scoped>
    .EditGraphicalPanel{
        position: absolute;
        width: 300px;
        height: 46%;
        background-color: #488adb75;
        border-radius: 10px;
        bottom: 1%;
        z-index: 100;
        right: 1%;
    }
    .EditGraphicalPanelBox{
        width: 100%;
        height: 100%;
    }
    .EditGraphicalTitle{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        position: relative;
    }
    .EditGraphicalTitle::before{
        content: '';
        width: 5px;
        height: 63%;
        position: absolute;
        left: 5%;
        top: 23%;
        background-color: #50abf5;
    }
    .EditGraphicalTitle span{
        margin-left: 32px;
        color: #6ac9ff;
    }
    .EditGraphicalTitleBtn{
        position: absolute;
        right: 6%;
        top: 7%;
    }
    .EditGraphicalTitleBtn i{
        font-size: 20px;
        cursor: pointer;
    }
    .EditGraphicalContent{
        height: calc(100% - 40px);
        width: 100%;
    }
    .EditGraphicBox{
        padding-left: 18px;
    }
    :deep(.el-form-item__label){
        color: #fff;
    }
</style>
